<template>
  <div style="background-color: #f0f2f5; width: 100%; overflow: hidden">
    <el-tabs
      tab-position="left"
      style="width: 95%; margin: 0 auto; background-color: #fff; margin: 30px"
    >
      <el-tab-pane label="安全设置">
        <div style="font-size: 22px; margin-top: 30px">安全设置</div>
        <div style="margin-top: 30px; margin-bottom: 15px">
          <div style="width: 95%; margin: 0 auto">
            <div
              style="
                color: rgba(0, 0, 0, 0.85);
                font-size: 14px;
                margin-bottom: 10px;
              "
            >
              账号密码
            </div>
            <div style="color: rgba(0, 0, 0, 0.45); font-size: 14px">
              当前密码强度: 强
            </div>
            <div style="cursor: pointer; color: #9caaff; margin-left: 1350px">
              修改
            </div>
            <hr style="border-color;: #F0F2F5;" />
          </div>

          <div style="width: 95%; margin: 0 auto">
            <div
              style="
                color: rgba(0, 0, 0, 0.85);
                font-size: 14px;
                margin-bottom: 10px;
              "
            >
              密保手机
            </div>
            <div style="color: rgba(0, 0, 0, 0.45); font-size: 14px">
              已绑定手机：138****8293
            </div>
            <div style="cursor: pointer; color: #9caaff; margin-left: 1350px">
              修改
            </div>
            <hr style="border-color;: #F0F2F5;" />
          </div>
          <div style="width: 95%; margin: 0 auto">
            <div
              style="
                color: rgba(0, 0, 0, 0.85);
                font-size: 14px;
                margin-bottom: 10px;
              "
            >
              密保问题
            </div>
            <div style="color: rgba(0, 0, 0, 0.45); font-size: 14px">
              未设置密保问题，密保问题可有效保护账户安全
            </div>
            <div style="cursor: pointer; color: #9caaff; margin-left: 1350px">
              修改
            </div>
            <hr style="border-color;: #F0F2F5;" />
          </div>
          <div style="width: 95%; margin: 0 auto">
            <div
              style="
                color: rgba(0, 0, 0, 0.85);
                font-size: 14px;
                margin-bottom: 10px;
              "
            >
              备用邮箱
            </div>
            <div style="color: rgba(0, 0, 0, 0.45); font-size: 14px">
              已绑定邮箱：ant***sign.com
            </div>
            <div style="cursor: pointer; color: #9caaff; margin-left: 1350px">
              修改
            </div>
            <hr style="border-color;: #F0F2F5;" />
          </div>
          <div style="width: 95%; margin: 0 auto">
            <div
              style="
                color: rgba(0, 0, 0, 0.85);
                font-size: 14px;
                margin-bottom: 10px;
              "
            >
              MFA 设备
            </div>
            <div style="color: rgba(0, 0, 0, 0.45); font-size: 14px">
              未绑定 MFA 设备，绑定后，可以进行二次确认
            </div>
            <div style="cursor: pointer; color: #9caaff; margin-left: 1350px">
              修改
            </div>
            <hr style="border-color: #f0f2f5" />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="新消息通知">
        <div style="font-size: 22px; margin-top: 30px">新消息通知</div>
        <div style="width: 95%; margin: 0 auto; margin-top: 30px">
          <div
            style="
              color: rgba(0, 0, 0, 0.85);
              font-size: 14px;
              margin-bottom: 10px;
            "
          >
            账户密码
          </div>
          <div style="color: rgba(0, 0, 0, 0.45); font-size: 14px">
            其他用户的消息将以站内信的形式通知
          </div>
          <div style="cursor: pointer; color: #9caaff; margin-left: 1350px">
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
          <hr style="border-color: #f0f2f5" />
        </div>
        <div style="width: 95%; margin: 0 auto">
          <div
            style="
              color: rgba(0, 0, 0, 0.85);
              font-size: 14px;
              margin-bottom: 10px;
            "
          >
            系统消息
          </div>
          <div style="color: rgba(0, 0, 0, 0.45); font-size: 14px">
            系统消息将以站内信的形式通知
          </div>
          <div style="cursor: pointer; color: #9caaff; margin-left: 1350px">
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
          <hr style="border-color: #f0f2f5" />
        </div>
        <div style="width: 95%; margin: 0 auto">
          <div
            style="
              color: rgba(0, 0, 0, 0.85);
              font-size: 14px;
              margin-bottom: 10px;
            "
          >
            待办任务
          </div>
          <div style="color: rgba(0, 0, 0, 0.45); font-size: 14px">
            待办任务将以站内信的形式通知
          </div>
          <div style="cursor: pointer; color: #9caaff; margin-left: 1350px">
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
          <hr style="border-color: #f0f2f5" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: true,
    }
  },
}
</script>

<style>
</style>